<template>
  <!-- 搜索弹出框：产品列表 -->
  <div>
    <van-dropdown-menu>
      <van-dropdown-item
        disabled
        v-model="value1"
        :options="option1"
        title="综合"
      />
      <van-dropdown-item
        @change="changePrice"
        v-model="value1"
        :options="option1"
        title="价格"
      />
      <van-dropdown-item
        @change="changeCategory"
        v-model="categoryVal"
        :options="filterCategory"
        title="分类"
      />
    </van-dropdown-menu>
    <van-empty
      v-if="searchgoodsListData.length == 0"
      image="search"
      description="你不配知道"
    />
    <ul v-else>
      <li
        v-for="item in searchgoodsListData"
        :key="item.id"
        @click="toProductDetail(item.id)"
      >
        <img :src="item.list_pic_url" alt="" width="100%" />
        <p>{{ item.name }}</p>
        <p :style="{ color: 'darkred' }">{{ item.retail_price | RMB }}</p>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value1: "",
      categoryVal: 0,
      option1: [
        { text: "价格由高到低", value: "desc" },
        { text: "价格由低到高", value: "asc" },
      ],
      // option2: [],
    };
  },
  methods: {
    toProductDetail(val) {
      // 跳转到商品详情页
      // 跳转时把对应的id带上，也就是产品id
      this.$router.push("/productDetail?id=" + val);

      setTimeout(() => {
        this.$router.go(0);
      }, 100);
    },
    changeCategory(val) {
      // console.log(val);
      // 子传父 通过emit调用，传入参数
      this.$emit("changeCategory", val);
    },
    changePrice(val) {
      this.$emit("changePrice", val);
    },
  },
  props: ["searchgoodsListData", "filterCategory"],
  beforeUpdate() {
    // 修改 categoryVal 的值为 checked这一项为true 的id值
    this.filterCategory.map((item) => {
      if (item.checked) {
        this.categoryVal = item.value;
      }
    });
  },
  // filters: {
  // RMB(val) {
  //   return "￥" + val.toFixed(2) + " 元";
  // },
  // },
  // created() {
  //   setTimeout(() => {
  //     this.option2 = this.filterCategory.map((item, index) => {
  //       return { text: item.name, value: index };
  //     });
  //   }, 100);
  // },
};
</script>
 
<style lang = "less" scoped>
ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0.1rem 0.1rem 0;
  li {
    width: 49%;
    background-color: #fff;
    margin-bottom: 0.1rem;
    text-align: center;
    p {
      line-height: 0.3rem;
      height: 0.3rem;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}
</style>